<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Validation</title>
    <style>
        form {
            width: 405px;
            margin: 0 auto;
        }

        form > div {
            margin-top: 10px;
            position: relative;
        }

        form label {
            display: inline-block;
            position: absolute;
            left: 0;
            top: 0;
            line-height: 43px;
            width: 100px;
            text-align: center;
            color: #5e5e5e;
            border-right: 1px solid #ccc;
        }

        form input {
            border: 2px solid #ccc;
            line-height: 40px;
            padding-left: 105px;
            width: 300px;
            height:40px;
            outline: none;
        }

        form span {
            display: block;
            min-width: 20px;
            line-height: 20px;
            height: 20px;
            color: #ccc;
            font-size: 12px;
            padding-left: 10px;
        }

        button {
            width: 100%;
            line-height: 40px;
            border: none;
            background: #0087d8;
            color: #fff;
            letter-spacing: 15px;

        }

        em {
            font-style: normal;
            color: red;
        }
    </style>

</head>
<body>
<form action="./form-validation.html" method="get" id="form-validation">
    <div>
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" placeholder="请输入用户名">
        <span id="tip-username"></span>
    </div>
    <div>
        <label for="password">密码</label>
        <input type="password" name="password" id="password" placeholder="请输入密码">
        <span id="tip-password"></span>
    </div>
    <div>
        <label for="tel">手机号</label>
        <input type="tel" id="tel" name="tel" placeholder="请输入手机号">
        <span id="tip-tel"></span>
    </div>
    <div>
        <button type="submit" id="submit">提交</button>
        <span id="tip-submit"></span>
    </div>
</form>

<!--引入 dom 查js 提供一些简单的操作 -->
<script src="js/vendor/event.js"></script>
<script src="js/element.js"></script>
<script>
    var isHasError = false;
    $(document).ready(function () {
        $('#form-validation').on('submit', formSubmit);
        checkUserName();
        checkPassword();
        checkPhone();
    });

    function checkUserName() {
        var username = $('#username');
        var tip = $('#tip-username');
        username.on('focus', function () {
            tip.html('支持中文、字母、数字、“-”“_”的组合，4-20个字符');
        });
        username.on('blur', function (e) {
            console.info(e);
            checkInputUserName();
        })
    }

    function checkInputUserName() {
        var username = $('#username');
        var tip = $('#tip-username');
        var v = username.val();
        var regLength = /^[A-Za-z0-9\u4e00-\u9fa5-\w]{4,20}$/;
        var regChar = /^[A-Za-z0-9\u4e00-\u9fa5-\w]+$/;
        if ($.isEmpty(v)) {
            showError('<em>不能为空</em>');
        } else if (!regLength.test(v)) {
            showError('<em>长度只能在4-20个字符之间</em>');
        } else if (!regChar.test(v)) {
            showError('<em>格式错误，仅支持汉字、字母、数字、“-”“_”的组合</em>');
        } else {
            tip.html('');
            isHasError = false;
            username.css('border', '2px solid #00FF00');
        }
        function showError(message) {
            tip.html(message);
            isHasError = true;
            username.css('border', '2px solid red');
        }
    }

    function checkPassword() {
        var password = $('#password');
        var tip = $('#tip-password');
        password.on('focus', function () {
            tip.html('以字母开头，长度在6-20之间，只能包含字符、数字和下划线');
        });
        password.on('blur', function () {
            checkInputPassword ();
        });
    }

    function checkInputPassword() {
        var password = $('#password');
        var tip = $('#tip-password');
        var val = password.val();
        var reg = /^[a-zA-Z]\w{6,20}$/;
        if ($.isEmpty(val)) {
            showError('<em>不能为空</em>');
        } else if (!reg.test(val)) {
            showError('<em>以字母开头，长度在6-20之间，只能包含字符、数字和下划线</em>');
        } else {
            tip.html('');
            isHasError = false;
            password.css('border', '2px solid #00FF00');
        }
        function showError(message) {
            tip.html(message);
            isHasError = true;
            password.css('border', '2px solid red');
        }
    }

    function checkPhone() {
        var phone = $('#tel');
        var tip = $('#tip-tel');
        phone.on('focus', function () {
            tip.html('完成验证后，你可以用该手机登录和找回密码');
        });

        phone.on('blur', function (e) {
            console.log(e);
            checkInputPhone()
        });
    }

    function checkInputPhone() {
        var phone = $('#tel');
        var tip = $('#tip-tel');
        var val = phone.val();
        var reg = /^1[34578]\d{9}$/;
        if ($.isEmpty(val)) {
            showError('<em>不能为空</em>');
        } else if (!reg.test(val)) {
            showError('<em>手机号码格式不正确</em>');
        } else {
            tip.html('');
            isHasError = false;
            phone.css('border', '2px solid #00FF00');
        }

        function showError(message) {
            tip.html(message);
            isHasError = true;
            phone.css('border', '2px solid red');
        }
    }

    function formSubmit(e) {
        console.log(e);
        checkInputUserName();
        checkInputPassword();
        checkInputPhone();
        var tip = $('#tip-submit');
        if (isHasError === true) {
            e.prevent();  //阻止默认事件
            tip.html('<em>无法提交，请检查上面的错误</em>');
        } else {
            tip.html('');
        }
    }
</script>
</body>
</html>